<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
     <meta charset="utf-8">

    <title>Utbudskatalog</title>

    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">

    <title>Utbudstjänst</title>
    
    <link type="text/css" rel="stylesheet" href="../assets/css/pure-min.css" />
    <link type="text/css" rel="stylesheet" href="../assets/css/pure-app.css" />
</head>
<body>
	<div class="pure-g">
		<div class="pure-u-1-24"></div>

		<div class="pure-u-16-24" id="view">
			<form class="pure-form">
				<fieldset>
					<div data-bind="foreach: filter.filters">
					    <div>
					        <span data-bind="text: Name"></span>:<br />
					    </div>
					    <div data-bind="if: Type == 'select'">
					        <select data-bind="options: Options, optionsText: 'Name', value: CurrentOption"></select>
					    </div>
					    <div data-bind="if: Type == 'text'">
					        <input type="text" data-bind="value: Value, valueUpdate: 'afterkeydown'" />
					    </div>
					</div>
					<br />
					<b>Sorts:</b>
					Field:<br />
					<select data-bind="options: sorter.sortOptions, optionsText: 'Name', value: sorter.currentSortOption"></select>
					Direction:
					<select data-bind="options: sorter.sortDirections, optionsText: 'Name', value: sorter.currentSortDirection"></select>
				</fieldset>
			</form>

			<!-- Pager och filter -->
			<form class="pure-form">
				<div class="Pager"></div>
				<div class="NoRecords"></div>
			</form>

			<!-- Vy -->
			<table class="pure-table pure-table-striped">
			    <thead>
			        <tr>
			            <th>
			                hsaID
			            </th>
			            <th>
			                Name
			            </th>
			            <th>
			                Status
			            </th>
			        </tr>
			    </thead>
			    <tbody data-bind="foreach: pager.currentPageRecords">
			        <tr data-bind="click:editItem,attr: {id: hsaID}">
			            <td>
			                <span data-bind="text: hsaID"></span>
			            </td>
			            <td>
			                <span data-bind="text: name"></span>
			            </td>
			            <!--<td>
			                <span data-bind="text: status"></span>
			            </td>-->
			        </tr>
			    </tbody>
			</table>
		</div>

		<!-- Redigera -->
		<div class="pure-u-6-24" id="edit">
			<form class="pure-form">
				<h3 data-bind="text: hsaID"></h3>
				<p data-bind="text: name"></p>
				<input type="text" id="hsaID" data-bind="value: hsaID" />
				<input type="text" id="itemName" data-bind="value: name" />
				<hr />
    			<span data-bind="click:updateModel">Save</span>
    			<span data-bind="click:cancelUpdate">Cancel</span>
			</form></div>
		<div class="pure-u-1-24"></div>
	</div>

	<!--<fieldset data-bind="visible: displayForm">
	    <div class="details">
	        <label>Name: <input id="name" /></label>
	        <label>HSA: <input id="hsaID" /></label>
	    <div>
	    <div class="tools">
	        <button data-bind="click: addItem">Add</button>
	    </div>
	</fieldset>-->

	<script src="../assets/js/lib/knockout-3.1.0.js"></script>
	<script src="../assets/js/lib/jquery-1.11.0.min.js"></script>
	<script type="text/javascript">

	function showEdit(item) {

		utbudModel.hsaID(item.hsaID);
		utbudModel.name(item.name);

		console.log(item);
	}


	var formOptions = {
		post: '/REST/Update..',
		name: 'editItem'
	}

	var FormModel = function(item) {
		var self = this;

		self.hsaID = ko.observable('Basic');
		self.name = ko.observable('Basic');

		return {
			name: self.hsaID,
			hsaID: self.name,

			edit: function(item) {
				self.name = item.name;	
				self.hsaID = item.hsaID;
				console.log(self);
			},

			updateModel: function() {},
			
		}
	}

	
// Model for each item
function UtbudModel(data)
{
	if (!data)
	{
		data = {};
	}
	
	var self = this;

	self.hsaID = data.hsaID;
	self.name = data.name;

	self.editItem = function(item) {
		//utbudModel.hsaID(item.hsaID);
		//utbudModel.name(item.name);
		formModel.edit(item);
	}
	
	// self.status = data.status;
}



function UtbudPageModel(data)
{
	if (!data)
	{
		data = {};
	}
	
	var self = this;

	//self.hsaID = ko.observable('');
	//self.name = ko.observable('');

	self.utbud = ExtractModels(self, data.utbud, UtbudModel);
	
	var filters = [
		{
			Type: "text",
			Name: "Name",
			Value: ko.observable(""),
			RecordValue: function(record) { return record.name; }
		}/*,
		{
			Type: "select",
			Name: "Status",
			Options: [
				GetOption("All", "All", null),
				GetOption("None", "None", "None"),
				GetOption("New", "New", "New"),
				GetOption("Recently Modified", "Recently Modified", "Recently Modified")
			],
			CurrentOption: ko.observable(),
			RecordValue: function(record) { return record.status; }
		}*/
	];

	var sortOptions = [
		{
			Name: "hsaID",
			Value: "hsaID",
			Sort: function(left, right) { return left.id < right.id; }
		},
        {
			Name: "Name",
			Value: "Name",
			Sort: function(left, right) { return CompareCaseInsensitive(left.name, right.name); }
		}/*,
		{
			Name: "Status",
			Value: "Status",
			Sort: function(left, right) { return CompareCaseInsensitive(left.status, right.status); }
		}*/
	];


	self.updateModel = function(itemNew) {
		var self = itemNew;

		var itemOriginal = ko.utils.arrayFirst(self.utbud, function(item) {
			if (utbudModel.hsaID() == item.hsaID) {
				return (item);
			}
		});


		console.log(itemOriginal);
		console.log(self.utbud.indexOf(itemOriginal));
	}

	self.cancelUpdate = function(itemNew) {
		
	}

	self.filter = new FilterModel(filters, self.utbud);
	self.sorter = new SorterModel(sortOptions, self.filter.filteredRecords);
	self.pager = new PagerModel(self.sorter.orderedRecords);
}

function PagerModel(records)
{
	var self = this;

	self.pageSizeOptions = ko.observableArray([1, 5, 25, 50, 100, 250, 500]);
	self.records = GetObservableArray(records);
	self.currentPageIndex = ko.observable(self.records().length > 0 ? 0 : -1);
	self.currentPageSize = ko.observable(25);
	
	self.recordCount = ko.computed(function() {
		return self.records().length;
	});

	self.maxPageIndex = ko.computed(function() {
		return Math.ceil(self.records().length / self.currentPageSize()) - 1;
	});
	
	self.currentPageRecords = ko.computed(function() {
		var newPageIndex = -1;
		var pageIndex = self.currentPageIndex();
		var maxPageIndex = self.maxPageIndex();
		if (pageIndex > maxPageIndex)
		{
			newPageIndex = maxPageIndex;
		}
		else if (pageIndex == -1)
		{
			if (maxPageIndex > -1)
			{
				newPageIndex = 0;
			}
			else
			{
				newPageIndex = -2;
			}
		}
		else
		{
			newPageIndex = pageIndex;
		}
		
		if (newPageIndex != pageIndex)
		{
			if (newPageIndex >= -1)
			{
				self.currentPageIndex(newPageIndex);
			}

			return [];
		}

		var pageSize = self.currentPageSize();
		var startIndex = pageIndex * pageSize;
		var endIndex = startIndex + pageSize;
		return self.records().slice(startIndex, endIndex);
	}).extend({ throttle: 5 });

	self.moveFirst = function() {
		self.changePageIndex(0);
	};

	self.movePrevious = function() {
		self.changePageIndex(self.currentPageIndex() - 1);
	};

	self.moveNext = function() {
		self.changePageIndex(self.currentPageIndex() + 1);
	};

	self.moveLast = function() {
		self.changePageIndex(self.maxPageIndex());
	};

	self.changePageIndex = function(newIndex) {
		if (newIndex < 0
			|| newIndex == self.currentPageIndex()
			|| newIndex > self.maxPageIndex())
		{
			return;
		}

		self.currentPageIndex(newIndex);
	};

	self.onPageSizeChange = function() {
		self.currentPageIndex(0);
	};

	self.renderPagers = function() {
		var pager = "<div><a class=\"pure-button\" href=\"#\" data-bind=\"click: pager.moveFirst, enable: pager.currentPageIndex() > 0\">&lt;&lt;</a> <a class=\"pure-button\" href=\"#\" data-bind=\"click: pager.movePrevious, enable: pager.currentPageIndex() > 0\">&lt;</a>Page <span data-bind=\"text: pager.currentPageIndex() + 1\"></span> of <span data-bind=\"text: pager.maxPageIndex() + 1\"></span> [<span data-bind=\"text: pager.recordCount\"></span> Record(s)]<select data-bind=\"options: pager.pageSizeOptions, value: pager.currentPageSize, event: { change: pager.onPageSizeChange }\"></select><a  class=\"pure-button\" href=\"#\" data-bind=\"click: pager.moveNext, enable: pager.currentPageIndex() < pager.maxPageIndex()\">&gt;</a> <a class=\"pure-button\" href=\"#\" data-bind=\"click: pager.moveLast, enable: pager.currentPageIndex() < pager.maxPageIndex()\">&gt;&gt;</a></div>";
		$("div.Pager").html(pager);
	};
	self.renderNoRecords = function() {
		var message = "<span data-bind=\"visible: pager.recordCount() == 0\">No records found.</span>";
		$("div.NoRecords").html(message);
	};

	self.renderPagers();
	self.renderNoRecords();
}

function SorterModel(sortOptions, records)
{
	var self = this;
	self.records = GetObservableArray(records);
	self.sortOptions = ko.observableArray(sortOptions);
	self.sortDirections = ko.observableArray([
		{
			Name: "Asc",
			Value: "Asc",
			Sort: false
		},
		{
			Name: "Desc",
			Value: "Desc",
			Sort: true
		}]);
	self.currentSortOption = ko.observable(self.sortOptions()[0]);
	self.currentSortDirection = ko.observable(self.sortDirections()[0]);
	self.orderedRecords = ko.computed(function()
	{
		var records = self.records();
		var sortOption = self.currentSortOption();
		var sortDirection = self.currentSortDirection();
		if (sortOption == null || sortDirection == null)
		{
			return records;
		}

		var sortedRecords = records.slice(0, records.length);
		SortArray(sortedRecords, sortDirection.Sort, sortOption.Sort);
		return sortedRecords;
	}).extend({ throttle: 5 });
}

function FilterModel(filters, records)
{
	var self = this;

	self.records = GetObservableArray(records);
	self.filters = ko.observableArray(filters);

	self.activeFilters = ko.computed(function() {
		var filters = self.filters();
		var activeFilters = [];
		for (var index = 0; index < filters.length; index++)
		{
			var filter = filters[index];
			if (filter.CurrentOption)
			{
				var filterOption = filter.CurrentOption();
				if (filterOption && filterOption.FilterValue != null)
				{
					var activeFilter = {
						Filter: filter,
						IsFiltered: function(filter, record)
						{
							var filterOption = filter.CurrentOption();
							if (!filterOption)
							{
								return;
							}

							var recordValue = filter.RecordValue(record);
							return recordValue != filterOption.FilterValue;NoMat
						}
					};
					activeFilters.push(activeFilter);
				}
			}
			else if (filter.Value)
			{
				var filterValue = filter.Value();
				if (filterValue && filterValue != "")
				{
					var activeFilter = {
						Filter: filter,
						IsFiltered: function(filter, record)
						{
							var filterValue = filter.Value();
							filterValue = filterValue.toUpperCase();
							
							var recordValue = filter.RecordValue(record);
							recordValue = recordValue.toUpperCase();
							return recordValue.indexOf(filterValue) == -1;
						}
					};
					activeFilters.push(activeFilter);
				}
			}
		}

		return activeFilters;
	});

	self.filteredRecords = ko.computed(function() {
		var records = self.records();
		var filters = self.activeFilters();
		if (filters.length == 0)
		{
			return records;
		}
		
		var filteredRecords = [];
		for (var rIndex = 0; rIndex < records.length; rIndex++)
		{
			var isIncluded = true;
			var record = records[rIndex];
			for (var fIndex = 0; fIndex < filters.length; fIndex++)
			{
				var filter = filters[fIndex];
				var isFiltered = filter.IsFiltered(filter.Filter, record);
				if (isFiltered)
				{
					isIncluded = false;
					break;
				}
			}
			
			if (isIncluded)
			{
				filteredRecords.push(record);
			}
		}

		return filteredRecords;
	}).extend({ throttle: 200 });
}

function ExtractModels(parent, data, constructor)
{
	var models = [];
	if (data == null)
	{
		return models;
	}

	for (var index = 0; index < data.length; index++)
	{
		var row = data[index];
		var model = new constructor(row, parent);
		models.push(model);
	}

	return models;
}

function GetObservableArray(array)
{
	if (typeof(array) == 'function')
	{
		return array;
	}

	return ko.observableArray(array);
}

function CompareCaseInsensitive(left, right)
{
	if (left == null)
	{
		return right == null;
	}
	else if (right == null)
	{
		return false;
	}

	return left.toUpperCase() <= right.toUpperCase();
}

function GetOption(name, value, filterValue)
{
	var option = {
		Name: name,
		Value: value,
		FilterValue: filterValue
	};
	return option;
}

function SortArray(array, direction, comparison)
{
	if (array == null)
	{
		return [];
	}

	for (var oIndex = 0; oIndex < array.length; oIndex++)
	{
		var oItem = array[oIndex];
		for (var iIndex = oIndex + 1; iIndex < array.length; iIndex++)
		{
			var iItem = array[iIndex];
			var isOrdered = comparison(oItem, iItem);
			if (isOrdered == direction)
			{
				array[iIndex] = oItem;
				array[oIndex] = iItem;
				oItem = iItem;
			}
		}
	}

	return array;
}

var utbudModel = {};
var formModel = {};

$(document).ready(function() {
	$.getJSON("/data/capacity/byunitsid.json", function(data) { 	
		utbudModel = new UtbudPageModel({utbud:data});
		formModel = new FormModel();
		ko.applyBindings(utbudModel, document.getElementById('view'));
		ko.applyBindings(formModel, document.getElementById('edit'));
	});
});

	</script>
	</body>
</html>
